<template>
  <h1>属性绑定指令</h1>
  <input type="text" value="uname">
  <!-- 属性绑定:将HTML的属性值绑定给某个响应式变量,由响应式变量来控制该属性的值 -->
  <input type="text" v-bind:value="uname">
  <!-- 简写形式 -->
  <input type="text" :value="uname">
  <hr>
  <a href="url">超链接1</a>
  <a :href="url" :title="title">超链接2</a>
</template>

<script setup>
import {ref} from "vue";

const uname = ref('rose');

const url = ref('https://www.baidu.com');
url.value = 'https://www.jd.com';

// 新增一个响应式变量 title 值为 '7月正在热销中!'
// 修改第二个 <a> 标签，显示 title 的内容作为 a 标签的悬停提示
const title = ref('7月正在热销中!');
</script>

<style scoped>

</style>